AJAX

即「Asynchronous JavaScript and XML」（非同步的JavaScript與XML技術）

　　　　　　　　　　　　　　　　　　　　　　　──以上內容摘錄自 Wiki

在 JavaScript 持續進步的現在，已經有非常多的方法能達成 AJAX
像是 jQuery.ajax() 、 ES6 的 fetch
　
不過我們今天要使用的是更老派的做法 ── XMLHttpRequest

以下是我們本次完整的 AJAX code

var xhr = new XMLHttpRequest();
xhr.open('get','URL');
xhr.send(null);
xhr.onload = function () {
    data = JSON.parse(xhr.responseText);
    console.log(`已經載入 api `)
    }

code 解釋

xhr.open('get','URL');
// 格式、要讀取的網址、同步或非同步

格式：'get'(讀取資料)、'post'(傳送資料至該資料庫)

同步與非同步

• true(預設值) 非同步
  使用非同步的設定時，我們的程式碼不會等到資料回傳回來，就會開始執行後續程式碼
  在第三步的xhr.onload會做更詳細的解釋

• false 同步
  會等資料回傳(接收)完畢，才繼續往下跑

xhr.send(null);

傳送資料（若上面使用'get'，則此欄填寫空值 null ）

同步與非同步-2

xhr.onload = function () {
    data = JSON.parse(xhr.responseText);
    // 將撈取回來的 JSON 字串轉回物件格式
    console.log(`已經載入 api `)
    // 若成功載入，console 一段提示
    }

呼應上方的情境，既然我們可以使用false(同步)等資料傳完才執行後續
為何我們預設要使用 true(非同步)，再使用 xhr.onload 載入內容呢？

因為有時候我們撈取的 JSON 檔可能是一大筆資料
倘若不要太浮誇，2000筆就好
那等我們2000筆資料抓完才去執行後續動作，網頁就會在載入完成之前都卡在那邊不做事

這對於使用者而言是非常糟糕的 lag 體驗

　
所以我們預設都會使用非同步的方式，讓網頁整體能繼續執行下去
而xhr.onload裡的內容，則等到資料全數完成時再做執行

其中比較有趣的是 data = JSON.parse(xhr.responseText);
因為 JSON 雖然本身是 陣列包物件 的格式，但資料在傳輸的時候必須轉換成 string(字串)
所以我們在接收到了傳送來的「字串」時，就必須使用 JSON.parse 將其轉換回原本的格式

今天真的是冷的嫑嫑的..
各位鐵人們寫文章之虞，千萬別忘了保暖呀！

補充資料

• JSON.parse 函式 (JavaScript) - MSDN
• JSON.parse() - JavaScript - MDN
• 使用 XMLHttpRequest - MDN
• 同步與非同步的差異

>>隊友任意門<<

• Jason 勇者Jason和前端之鑰
• Clover 用Vue與firebase開發訂便當系統實錄
• aflect 我的UI/UX奮鬥屎
• GG 一隻巨大的UI/UX菜鳥
• Jimmy ES666
• R-yin 菜鳥前端奮鬥史(欸?

我是小菜鳥阿陰，我們下次見！